<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Icon } from '@iconify/vue';

const { t } = useI18n();

// 功能数据
const featureData = [
  {
    title: 'referral.features.clients.title',
    desc: 'referral.features.clients.desc',
    icon: 'mdi:account-switch',
    color: 'primary'
  },
  {
    title: 'referral.features.trail_loss.title',
    desc: 'referral.features.trail_loss.desc',
    icon: 'mdi:cash-minus',
    color: 'error'
  },
  {
    title: 'referral.features.profitable_clients.title',
    desc: 'referral.features.profitable_clients.desc',
    icon: 'mdi:account-cash',
    color: 'success'
  },
  {
    title: 'referral.features.top_lenders.title',
    desc: 'referral.features.top_lenders.desc',
    icon: 'mdi:bank',
    color: 'info'
  },
  {
    title: 'referral.features.monthly_tracking.title',
    desc: 'referral.features.monthly_tracking.desc',
    icon: 'mdi:chart-line',
    color: 'warning'
  },
  {
    title: 'referral.features.yearly_trail.title',
    desc: 'referral.features.yearly_trail.desc',
    icon: 'mdi:calendar-check',
    color: 'secondary'
  }
];

// 获取功能标题的表情符号
const getEmoji = (index: number): string => {
  const emojis = ['', '', '', '🏦', '📈', '📅'];
  return emojis[index] || '';
};

// 激活功能卡片
const activateFeatureCard = (index: number) => {
  console.log('Feature selected:', featureData[index].title);
  // 实现功能卡片详情展示逻辑
};
</script>

<template>
    <div class="py-sm-16 py-8 overflow-hidden position-relative" id="features">
        <div class="backgroundShape"></div>
        <v-container>
            <div class="maxWidth">
                <v-row>
                    <v-col cols="12">
                        <div class="heading text-center pb-sm-16 pb-8">
                            <h1 class="mainTitle" data-aos="fade-up" data-aos-duration="500">
                                {{ t('referral.features_title') }}
                            </h1>
                            <h5 class="title-desc text-center mx-auto" data-aos="fade-up" data-aos-duration="800">
                                {{ t('referral.about_text') }}
                            </h5>
                        </div>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col
                        cols="12"
                        md="6"
                        lg="4"
                        class="d-flex align-center"
                        v-for="(item, i) in featureData"
                        :key="i"
                        data-aos="fade-up" 
                        :data-aos-delay="100 * i"
                        data-aos-duration="800"
                    >
                        <v-card variant="elevated" class="pa-sm-6 pa-4 d-flex flex-column gap-5 h-100">
                            <v-avatar rounded variant="tonal" :color="item.color" size="50" class="d-flex align-center">
                                <Icon :icon="item.icon" size="28" class="text-white" />
                            </v-avatar>
                            <div>
                                <h4 class="text-h5 font-weight-semibold d-flex align-center">
                                    {{ getEmoji(i) }} {{ t(item.title) }}
                                </h4>
                                <div class="pt-4 cardtext">{{ t(item.desc) }}</div>
                            </div>
                            <div class="mt-auto">
                                <v-btn class="mt-5" @click="activateFeatureCard(i)" variant="tonal" :color="item.color">
                                    {{ t('Learn More') }} <Icon icon="mdi:arrow-right" class="ms-1" />
                                </v-btn>
                            </div>
                        </v-card>
                    </v-col>
                </v-row>
                
                <v-row class="mt-16">
                    <v-col cols="12" md="8" offset-md="2" data-aos="fade-up" data-aos-duration="800">
                        <v-card class="pa-6">
                            <h3 class="text-h4 font-weight-bold mb-4">{{ t('referral.why_matters_title') }}</h3>
                            <p class="text-body-1">{{ t('referral.why_matters_text') }}</p>
                            
                            <v-divider class="my-6"></v-divider>
                            
                            <h4 class="text-h5 font-weight-semibold mb-3">{{ t('referral.get_started_title') }}</h4>
                            <p class="text-body-1 mb-4">{{ t('referral.get_started_text') }}</p>
                            <p class="text-body-1">{{ t('referral.get_started_cta') }}</p>
                            
                            <div class="text-center mt-6">
                                <v-btn color="primary" size="large" href="/auth/login" class="px-6">
                                    {{ t('referral.login_cta') }}
                                </v-btn>
                            </div>
                        </v-card>
                    </v-col>
                </v-row>
            </div>
        </v-container>
    </div>
</template> 